@prime-color: #6cf;
@prime-color-light: #cdeeff;
@border-color: #ddd;

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    #app {
        height: 100vh;
        width: 100vw;
        .tabs {
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
            .tab {
                padding: 0.2rem 0.1rem;
                display: flex;
                flex-direction: column;
                .navigator {
                    display: flex;
                    flex-direction: row;
                    margin-bottom: 0.2rem;
                    line-height: 2rem;
                    height: 2rem;
                    border: 0.01rem solid @border-color;
                    &:hover {
                        outline: 0.1rem solid @prime-color-light;
                    }
                    &:focus-within {
                        outline: 0.1rem solid @prime-color;
                    }
                    .url {
                        flex: 1;
                        border: none;
                        outline: none;
                    }
                    .icons {
                        width: 2rem;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        color: @border-color;
                        &:hover {
                            color: @prime-color;
                        }
                        & > div {
                            margin: auto;
                        }
                    }
                }
                .page {
                    flex: 1;
                    display: flex;
                    user-select: none;
                    iframe {
                        flex: 1;
                        border: 1px solid @border-color;
                    }
                }
            }
        }
        .add {
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            height: 2rem;
            width: 2rem;
            cursor: pointer;
            color: @border-color;
            display: flex;
            flex-direction: row;
            justify-content: center;
            &:hover {
                color: @prime-color-light;
            }
            &:focus {
                color: @prime-color;
            }
            .gg-add {
                margin: auto;
                --ggs: 1.2;
            }
        }
    }
}
